<template>
  <div class="conbox">
    <!-- 顶部 -->
    <van-nav-bar class="titles">
      <van-popover
        slot="left"
        v-model="showPopover"
        trigger="click"
        :actions="actions"
        @select="onSelect"
        placement="bottom"
      >
        <template #reference>
          <i class="iconfont icongengduo"></i>
        </template>
    </van-popover>
      <p slot="title" class="title">礼物</p>
      <i slot="right" class="iconfont iconShapes"></i>
    </van-nav-bar>
    <!-- 内容部分 -->
    <div class="main">
      <van-grid :column-num="1"  v-for="(item,value) in this.$store.state.liwu" :key="value">
        <div @click="gaibian(item)" class="context" >
          <van-grid-item class="list">
            <van-image
              slot="icon"
              :src="item.img"
              fit="cover"
              class="img"
            />
          </van-grid-item>
          <div class="wai">
            <van-cell class="center" center>
              <h3 slot="title" class="title">{{item.title}}</h3>
              <p slot="label" class="desc">{{item.desc}}</p>
            </van-cell>
          </div>     
        </div>
      </van-grid>
      <!-- <van-grid :column-num="1">
        <div @click="show = true" class="context">
          <van-grid-item class="list">
            <van-image
              slot="icon"
              :src="require('@/assets/500507600_banner.png')"
              fit="cover"
              class="img"
            />
          </van-grid-item>
          <div class="wai">
            <van-cell class="center" center>
              <h3 slot="title" class="title">世界上热门流行礼物</h3>
              <p slot="label" class="desc">礼物</p>
            </van-cell>
          </div>
        </div>
      </van-grid>
      <van-grid :column-num="1">
        <div @click="show = true" class="context">
          <van-grid-item class="list">
            <van-image
              slot="icon"
              :src="require('@/assets/500585779_banner.png')"
              fit="cover"
              class="img"
            />
          </van-grid-item>
          <div class="wai">
            <van-cell class="center" center>
              <h3 slot="title" class="title">因为有你</h3>
              <p slot="label" class="desc">礼物天堂</p>
            </van-cell>
          </div>
        </div>
      </van-grid>
      <van-grid :column-num="1">
        <div @click="show = true" class="context">
          <van-grid-item class="list">
            <van-image
              slot="icon"
              :src="require('@/assets/500489753_banner.png')"
              fit="cover"
              class="img"
            />
          </van-grid-item>
          <div class="wai">
            <van-cell class="center" center>
              <h3 slot="title" class="title">为了独一无二的你</h3>
              <p slot="label" class="desc">独一无二</p>
            </van-cell>
          </div>
        </div>
      </van-grid> -->
    </div>
    <!-- 遮罩层 -->
    <!-- <van-overlay :show="show" @click="show = false" /> -->
    <van-overlay :show="show" @click="tiaozhuang">
      <!-- 上面部分 -->
      <div class="zhezhao">
        <van-grid :column-num="1">
          <div @click="show = true" class="zhezhao-context">
            <van-grid-item class="zhezhao-list">
              <van-image
                slot="icon"
                :src="this.img"
                fit="cover"
                class="zhezhao-img"
              />
            </van-grid-item>
            <div class="zhezhao-wai">
              <van-cell class="zhezhao-center" center>
                <h3 slot="title" class="zhezhao-title">{{this.title}}</h3>
                <p slot="label" class="zhezhao-desc">{{this.desc}}</p>
              </van-cell>
            </div>
          </div>
        </van-grid>
        <div class="text">
          <p>
            善待一个人就是看到美好的事物。你的第一个想法是把它给他或她。幸运的是，世界上并不缺乏创意和甜美的人，
            眼睛从未停止过。善待一个人就是看到美好的事物。你的第一个想法是把它给他或她。幸运的是，
            世界上并不缺乏创意和甜美的人
          </p>
          <span class="text-line"></span>
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<script>
import { mapActions,mapMutations } from 'vuex'
export default {
  data() {
    return {
      currentRate: 0,
      flog: true,
      show: false,
      title:'',
      desc:'',
      img:'',
      showPopover: false,
      // 通过 actions 属性来定义菜单选项
      actions: [{ text: '猜你喜欢' }, { text: '推荐' }, { text: '列表' }]
    }
  },
  methods: {
    onSelect(action) {   
       if (action.text === '猜你喜欢'){
        this.$router.push('/cainixihuan')
      } 
      if (action.text === '推荐'){
        this.$router.push('/tuijian')
      }
      if (action.text === '列表'){
        this.$router.push('/liebiao')
      }
    },
    gaibian(item){
        // 吧数据给存起来赋值给遮罩层    
        this.title = item.title
        this.desc = item.desc
        this.img = item.img
        this.show = true      
    },
    tiaozhuang(Event){
      this.show = false
      // 跳转路由
      this.$router.push('/liwu')
    },
    ...mapActions(['getliwu'])
  },
  created(){
    this.getliwu()
  }
}
</script>
<style lang="less">
// 弹出层位子
.van-popover__action{
  width: 150px;
  font-size: 20px;
}
.conbox {
   [class*=van-hairline]::after{
        border:none;
      }
  .context {
    margin: 0 auto;
  }
  .van-hairline--bottom::after {
    border: none;
  }
  .main {
    .van-grid-item__content {
      padding: 10px 0px;
    }
    [class*='van-hairline']::after {
      border: none;
    }
  }
  .titles {
    padding: 0px 27px;
    .icongengduo {
      font-size: 38px;
    }
    .title {
      font-size: 32px;
      color: #484747;
    }
    .iconShapes {
      font-size: 42px;
    }
  }
  .list {
    .img {
      width: 634px;
      height: 296px;
      display: block;
      img {
        border-radius: 10px;
      }
    }
  }
  .wai {
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0.71;
    transform: translate(-50%, -50%);
    width: 512px;
    height: 92px;
    padding: 4px 6px;
    background-color: #ffffff;
    opacity: 0.89;
    border-radius: 5px;
  }
  .van-cell__label {
    margin-top: 9px;
  }
  .center {
    width: 100%;
    height: 100%;
    border: 1px solid #393939;
    border-radius: 6px;
    .title {
      font-size: 28px;
      color: #484747;
      line-height: 28px;
    }
    .desc {
      font-size: 22px;
      color: #b4b4b4;
      line-height: 22px;
    }
  }
  .van-cell {
    padding: 10px 0px;
  }
  // 遮罩层
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 120px;
    height: 120px;
    background-color: #fff;
  }
  // 遮罩层样式
  .zhezhao {
    padding: 0px 58px;
    position: relative;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    .van-grid{
      position:absolute;
      bottom: 244px;
      left: 90px;
      z-index: 999;
    }
    .zhezhao-center{
      position: relative;
    }
    .zhezhao-list {
      .van-grid-item__content{
        padding: 0px;
        background: none;
      }   
      .zhezhao-img {
        width: 570px;
        height: 264px;
        display: block;
        img {
          border-radius: 10px;
        }
      }
    }
    .zhezhao-wai {
      position: absolute;
      left: 50%;
      top: 50%;
      opacity: 0.71;
      transform: translate(-50%, -50%);
      width: 512px;
      height: 92px;
      padding: 4px 6px;
      background-color: #ffffff;
      opacity: 0.89;
      border-radius: 5px;
    }
    .van-cell__label {
      margin-top: 9px;
    }
    .zhezhao-center {
      width: 100%;
      height: 100%;
      border: 1px solid #393939;
      border-radius: 6px;
      .zhezhao-title {
        font-size: 28px;
        color: #484747;
        line-height: 28px;
      }
      .zhezhao-desc {
        font-size: 22px;
        color: #b4b4b4;
        line-height: 22px;
      }
    }
    .text {
      width: 634px;
      height: 334px;
      background: #ffffff;
      padding: 135px 92px 0px;
      border-radius: 10px;
      position: relative;
      p {
      font-family: PingFang-SC-Medium;
      font-size: 20px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #b4b4b4;
      text-align: left;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 5;
      }
      .text-line{
            width: 45px;
            height: 3px;
            background: #979797;
            position:absolute;
            right: 95px;
            bottom: 47px;
      }
    }
  }
}
</style>
